<div style="overflow-x: hidden;" xmlns="http://www.w3.org/1999/html">
    <div id="qhSiteClassMap"></div>
    <!--
    <div id="operatePanelButton" style="position: absolute;top: 20px;z-index: 1000;left: 70px;">
        <input type="button" style='width:50px;height:25px;cursor:pointer;margin-right:5px;margin-top:2px;font-size:14px;float:right;text-align: center;border-radius: 5px;border:1px solid #3B49EE;color:#3B49EE;' value="文件上传" />
    </div>
    -->
    <div id="operatePanelButton" style="position: absolute;display: block;top: 100px;left: 15px;z-index: 1000;background-color: #FFFFFF;display:block;" >
        <p><img id="operatePanelButtonImg" style='cursor:pointer;width: 31px;height: 31px;' title="文件上传" src="/qhwx/static/app/images/file_upload.jpg"><br/><span style='border:0;cursor:pointer;' >文件<br/>上传</span></p>
    </div>
    <div id="operatePanel" style="position: absolute;width: 350px;top: 100px;z-index: 1000;background-color: #FFFFFF;left: 55px;display: none;">
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <div id="button-closeForm" style="width:32px;height:32px;background: url('/qhwx/static/app/images/close_opanel.png') 8px no-repeat;cursor:pointer;margin-right:5px;margin-top:2px;font-size:14px;float:right;text-align: center;border-radius: 5px;" title="关闭" ></div>
                <div style="color: #ff0000;width: 180px;position: absolute;left: 30px;top: 10px;">请使用【CGCS2000】坐标系</div>
            </div>
            <div class="form-group">
                <label for="provinceSelect" class="col-md-4 control-label"></span>省:</label>
                <div class="col-md-8">
                    <select class="form-control" id="provinceSelect" name="provinceSelect" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="citySelect" class="col-md-4 control-label"></span>市:</label>
                <div class="col-md-8">
                    <select class="form-control" id="citySelect" name="citySelect" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="areaSelect" class="col-md-4 control-label"></span>区（县）:</label>
                <div class="col-md-8">
                    <select class="form-control" id="areaSelect" name="areaSelect" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal" style="margin-top: 20px;">
            <div class="form-group">
                <div class="col-md-4">
                    <input type="file" style="width: 70px;" id="button-selectfile" name="button-selectfile" multiple="multiple" accept=".shp,.dbf,.prj,.sbn,.sbx,.shp.xml,.shx" />
                </div>
                <div class="col-md-8">
                    <textarea rows="10" cols="20" class="form-control"  id="commentInfo" name="commentInfo" placeholder="导入多个文件时，文件名须相同" readonly/>
                </div>
                <div id="qhFieldInfoBtn" style="position: absolute;left: 20px;z-index: 100000;background-color: #FFFFFF;width: 60px;top:30px;">
                    <a><h5>字段说明</h5></a>
                </div>
            </div>
        </div>
        <!--
        <input type="button" class="btn btn-default" id="button-export" style="margin:5px;float:right;" value="下载" />
        -->
        <input type="button" class="btn btn-default" id="button-import" style="margin:5px;float:right;" value="上传" />
        <div class="col-md-12 form-horizontal" style="margin-top: 20px;">
            <div class="form-group">
                <div style="color: #ff0000;position: absolute;left: 30px;top: -20px;">系统已有全国数据，无需再上传!</div>
            </div>
        </div>
    </div>

    <div id="siteClassLayers3" style="position: absolute;display: block;top: 180px;left: 15px;z-index: 1000;background-color: #FFFFFF;display:block;" >
        <p><img id="siteClassLayersImg3" style='cursor:pointer;width: 32px;height: 32px;' title="图层查询" src="/qhwx/static/app/images/layers_search.jpeg"><br/><span style='border:0;cursor:pointer;' >图层<br/>查询</span></p>
    </div>
    <div id="operatePanel3" style="position: absolute;width: 400px;top: 180px;z-index: 1000;background-color: #FFFFFF;left: 55px;display: none;">
        <div class="form-group">
            <div id="operatePanel3CloseBtn" style="width:32px;height:32px;background: url('/qhwx/static/app/images/close_opanel.png') 8px no-repeat;cursor:pointer;margin-right:5px;margin-top:2px;font-size:14px;float:right;text-align: center;border-radius: 5px;" title="关闭" ></div>
        </div>
        <div class="col-md-12 form-horizontal" style="margin-top: 20px;">
            <div class="form-group">
                <label for="provinceSelect3" class="col-md-4 control-label"></span>省:</label>
                <div class="col-md-8">
                    <select class="form-control" id="provinceSelect3" name="provinceSelect3" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="citySelect3" class="col-md-4 control-label"></span>市:</label>
                <div class="col-md-8">
                    <select class="form-control" id="citySelect3" name="citySelect3" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="areaSelect3" class="col-md-4 control-label"></span>区（县）:</label>
                <div class="col-md-8">
                    <select class="form-control" id="areaSelect3" name="areaSelect3" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <div class="col-md-8">
                    <button id="btnSearch3" class="btn btn-default" type="button">查询</button>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal" style="margin-top: 10px;max-height: 245px;">
            <div class="form-group">
                <div class="col-md-12">
                    <div id="affiliatedFileNameGrid3" style="max-height: 245px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="siteClassLayers2" style="position: absolute;display: block;top: 260px;left: 15px;z-index: 1000;background-color: #FFFFFF;display:block;" >
        <p><img id="siteClassLayersImg" style='cursor:pointer;' title="图层管理" src="/qhwx/static/app/images/tucengoff.png"><br/><span style='border:0;cursor:pointer;' >图层<br/>管理</span></p>
    </div>
    <div id="operatePanel2" style="position: absolute;width: 400px;top: 200px;z-index: 1000;background-color: #FFFFFF;left: 55px;display: none;">
        <div class="form-group">
            <div id="operatePanel2CloseBtn" style="width:32px;height:32px;background: url('/qhwx/static/app/images/close_opanel.png') 8px no-repeat;cursor:pointer;margin-right:5px;margin-top:2px;font-size:14px;float:right;text-align: center;border-radius: 5px;" title="关闭" ></div>
        </div>
        <div class="col-md-12 form-horizontal" style="margin-top: 20px;">
            <div class="form-group">
                <label for="provinceSelect2" class="col-md-4 control-label"></span>省:</label>
                <div class="col-md-8">
                    <select class="form-control" id="provinceSelect2" name="provinceSelect2" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="citySelect2" class="col-md-4 control-label"></span>市:</label>
                <div class="col-md-8">
                    <select class="form-control" id="citySelect2" name="citySelect2" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <label for="areaSelect2" class="col-md-4 control-label"></span>区（县）:</label>
                <div class="col-md-8">
                    <select class="form-control" id="areaSelect2" name="areaSelect2" >
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal">
            <div class="form-group">
                <div class="col-md-8">
                    <button id="btnSearch" class="btn btn-default" type="button">查询</button>
                </div>
            </div>
        </div>
        <div class="col-md-12 form-horizontal" style="margin-top: 10px;max-height: 245px;">
            <div class="form-group">
                <div class="col-md-12">
                    <div id="affiliatedFileNameGrid2" style="max-height: 245px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="qhFieldInfo" style="position: absolute;left: 140px;z-index: 100000;background-color: #FFFFFF;top: 240px;width: 550px;height: 167px;display: none;">
        <div id="qhFieldInfoClose" style="right: -515px;position: relative;"><a><h5>关闭</h5></a></div>
        <div id="qhFieldInfoGrid" style="height: 167px;"></div>
    </div>
    <!--
    <div style="position:absolute;right: 15px;bottom: 15px;z-index: 1000;width: 490px;height: 40px;background-color: #FFFFFF;">
        <div style="position:absolute;width: 70px;height: 50%;right: 420px;top: 1px;background-color: #A87001;">
            <div style="top: 20px;position: absolute;left: 28px;">Ⅰ</div>
        </div>
        <div style="position:absolute;width: 70px;height: 50%;right: 340px;top: 1px;background-color: #DF9E66;">
            <div style="top: 20px;position: absolute;left: 28px;">Ⅱ</div>
        </div>
        <div style="position:absolute;width: 70px;height: 50%;right: 260px;top: 1px;background-color: #F6C568;">
            <div style="top: 20px;position: absolute;left: 28px;">Ⅲ</div>
        </div>
        <div style="position:absolute;width: 70px;height: 50%;right: 180px;top: 1px;background-color: #FFEABD;">
            <div style="top: 20px;position: absolute;left: 28px;">Ⅳ</div>
        </div>
        <div style="position:absolute;width: 70px;height: 50%;right: 100px;top: 1px;background-color: #FFFFBF;">
            <div style="top: 20px;position: absolute;left: 28px;">Ⅴ</div>
        </div>
        <div style="position:absolute;right: 40px;top: 1px;">
            <img src="/qhwx/static/app/images/marker-icon.png" style="width: 13px;height: 21px;">
            <div style="top: 20px;position: absolute;left: -35px;width: 80px;">收集钻孔位置</div>
        </div>
    </div>
    -->

    <!--
    <div style="position:absolute;right: 15px;bottom: 15px;z-index: 1000;width: 160px;height: 250px;background-color: #FFFFFF;border: 1px solid #8f8f8f;">
        <div style="position:absolute;left: 60px;top: 5px;"><h4>图例</h4></div>
        <div id="fx-raster-economic-legend" style="position: absolute;top:50px;width: 150px;left: -10px;">
            <div style="position:absolute;left: 30px;top: -20px;width: 100px;">
                <h6>场地类型</h6>
            </div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 20px;background-color: #FCDAD5;"></div>
            <div style="position:absolute;left: 70px;top: 20px;">Ⅴ</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 47px;background-color: #F5A89A;"></div>
            <div style="position:absolute;left: 70px;top: 47px;">Ⅳ</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 75px;background-color: #EE7C6B;"></div>
            <div style="position:absolute;left: 70px;top: 75px;">Ⅲ</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 103px;background-color: #DF0029;"></div>
            <div style="position:absolute;left: 70px;top: 103px;">Ⅱ</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 131px;background-color: #B2001F;"></div>
            <div style="position:absolute;left: 70px;top: 131px;">Ⅰ</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 40px;top: 159px;">
                <img src="/qhwx/static/app/images/marker-icon.png" style="width: 13px;height: 21px;">
            </div>
            <div style="position:absolute;left: 70px;top: 159px;">收集钻孔位置</div>
        </div>
    </div>
    -->

    <div style="position:absolute;right: 15px;bottom: 15px;z-index: 1000;width: 160px;height: 280px;background-color: #FFFFFF;border: 1px solid #8f8f8f;">
        <div style="position:absolute;left: 60px;top: 5px;"><h4>图例</h4></div>
        <div id="fx-raster-economic-legend" style="position: absolute;top:50px;width: 150px;left: -10px;">
            <div style="position:absolute;left: 30px;top: -20px;width: 100px;">
                <h6>场地类型</h6>
            </div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 20px;background-color: #B2001F;"></div>
            <div style="position:absolute;left: 70px;top: 20px;">I0类场地</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 47px;background-color: #DF0029;"></div>
            <div style="position:absolute;left: 70px;top: 47px;">I类场地</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 75px;background-color: #EE7C6B;"></div>
            <div style="position:absolute;left: 70px;top: 75px;">II类场地</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 103px;background-color: #F5A89A;"></div>
            <div style="position:absolute;left: 70px;top: 103px;">III类场地</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 131px;background-color: #FCDAD5;"></div>
            <div style="position:absolute;left: 70px;top: 131px;">IV类场地</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 30px;top: 161px;background-color: #4B85ED;"></div>
            <div style="position:absolute;left: 70px;top: 161px;">水体</div>
            <div style="position:absolute;width: 30px;height: 15px;left: 40px;top: 189px;">
                <img src="/qhwx/static/app/images/marker-icon.png" style="width: 13px;height: 21px;">
            </div>
            <div style="position:absolute;left: 70px;top: 189px;">收集钻孔位置</div>
        </div>
    </div>


    <!-- 以下为收集钻孔 -->
    <div style="position:absolute;right:10px;top:10px;z-index:90000">
        <button onclick="$('#queryDiv').toggle(200)" id="btnCollapse" style="width:100px;padding: 6px 6px;" class="btn btn-primary" type="button">
            钻孔数据查询
        </button>
    </div>
    <div id="queryDiv" style="position:absolute;right:10px;top:40px;z-index:99000;display: none;">
        <div style="width:1000px;padding-top:5px;">
            <div class="well">
                <form id="searchForm">
                    <div class="row">
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="provinceSelectDrill" class="col-md-4 control-label"></span>省份</label>
                                <div class="col-md-8">
                                    <select class="form-control" id="provinceSelectDrill" name="provinceSelectDrill" >
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="citySelectDrill" class="col-md-4 control-label"></span>所属地级市</label>
                                <div class="col-md-8">
                                    <select class="form-control" id="citySelectDrill" name="citySelectDrill" >
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="areaSelectDrill" class="col-md-4 control-label"></span>所属区县</label>
                                <div class="col-md-8">
                                    <select class="form-control" id="areaSelectDrill" name="areaSelectDrill" >
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="townDrill" class="col-md-4 control-label"></span>乡镇</label>
                                <div class="col-md-8">
                                    <input id="townDrill" type="text" name="townDrill" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="drillSynthesizeCode" class="col-md-4 control-label"></span>钻孔综合编号</label>
                                <div class="col-md-8">
                                    <input id="drillSynthesizeCode" type="text" name="drillSynthesizeCode" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-horizontal">
                            <div class="form-group">
                                <label for="siteClass" class="col-md-4 control-label"></span>场地类别</label>
                                <div class="col-md-8">
                                    <select class="form-control" id="siteClass" name="siteClass" >
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option value="I0">I0</option>
                                        <option value="I1">I1</option>
                                        <option value="II">II</option>
                                        <option value="III">III</option>
                                        <option value="IV">IV</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label"> </span>钻孔深度（m）</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input id="drillDepthFrom" type="text" class="form-control">
                                    </div>
                                </div>
                                <label class="col-sm-1 control-label" style="width: 4%;text-align: center;"> </span>至</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input id="drillDepthTo" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7 form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label"> </span>勘察施工日期</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input id="constructionStartDateFrom" type="text" class="form-control">
                                        <a id="complex_del1" class="input-group-addon"><i class="fa fa-times"></i></a>
                                        <a id="complex_show1" class="input-group-addon"><i class="fa fa-calendar"></i></a>
                                    </div>
                                </div>
                                <label class="col-sm-1 control-label" style="width: 4%;text-align: center;"> </span>至</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input id="constructionStartDateTo" type="text" class="form-control">
                                        <a id="complex_del2" class="input-group-addon"><i class="fa fa-times"></i></a>
                                        <a id="complex_show2" class="input-group-addon"><i class="fa fa-calendar"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 form-horizontal">
                            <div class="form-group">
                                <button id="btnDrillSearch" class="btn btn-default" type="button">查询</button>
                                <button id="btnDrillReset" class="btn btn-default" type="button">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="qhDrillOverviewMap"></div>
    <!--
    <div id="up-map-div" style="position:absolute;z-index:9999;border:1px solid blue;background-color:#FFFFFF;top:20px;left: 100px;">
        <button id="searchButton">绘制矩形查询</button>
    </div>
    -->
    <div id="qhDrillInfoClose" style="position:absolute;z-index:90000;display: none;">
        <button style="width:50px" class="btn btn-primary" type="button">
            收起
        </button>
    </div>
    <div id="qhDrillInfo" style="position: absolute;left: 100px;z-index: 100000;background-color: #FFFFFF;bottom: 60px;display: none;">
        <div class='qhDrillInfoTabTitle' style="">
            <ul>
                <li id="Y02" class=''><b>Y02成孔信息</b></li>
                <li id="Y04" class='qhDrillInfoTabCurrent'><b>Y04地层岩性分层</b></li>
                <li id="Y05" class='qhDrillInfoTabCurrent'><b>Y05标贯值</b></li>
                <li id="Y06" class='qhDrillInfoTabCurrent'><b>Y06剪切波实测值</b></li>
                <li id="Y08" class='qhDrillInfoTabCurrent'><b>Y08土动力试验参数</b></li>
                <li id="Y18" class='qhDrillInfoTabCurrent'><b>Y18成孔信息</b></li>
            </ul>
        </div>
        <div class='qhDrillInfoContent'>
            <div>
                <div id="qhDrillY02Grid" style="height: 200px;">Y02成孔信息</div>
            </div>
            <div>
                <div id="qhDrillY04Grid" style="height: 200px;">Y04地层岩性分层</div>
            </div>
            <div>
                <div id="qhDrillY05Grid" style="height: 200px;word-break: keep-all; white-space: nowrap;">Y05标贯值</div>
            </div>
            <div>
                <div id="qhDrillY06Grid" style="height: 200px;word-break: keep-all; white-space: nowrap;">Y06剪切波实测值</div>
            </div>
            <div>
                <div id="qhDrillY08Grid" style="height: 200px;word-break: keep-all; white-space: nowrap;">Y08土动力试验参数</div>
            </div>
            <div>
                <div id="qhDrillY18Grid" style="height: 200px;">Y18成孔信息</div>
            </div>
        </div>
    </div>
    <div id="qhDrillAccessoryInfo" style="position:absolute;z-index:100000;background-color: #FFFFFF;width:500px;display: none;">
        <a id="qhDrillAccessoryInfoClose" href="javascript:void(0)" style="color:deepskyblue;float: right;font-size: 15px;padding-right:5px">关闭</a>
        <div class="" id="multiFileUpload">
            <input type="hidden" class="form-control" id="accessory" name="accessory" />
        </div>
    </div>
</div>
<style>
    .tabTitle ul{ overflow: hidden; _height:1px; margin-left: -12px;}
    .tabTitle ul li{ float: left; border: 1px solid #abcdef; border-bottom: none; height: 30px; line-height: 30px; padding: 0 15px; margin-right: 3px; cursor:pointer;}
    .current{ background: #abcdef; color:#fff;}
    .tabContent div{ height: 250px; margin-top: -13px;}

    .qhDrillInfoTabTitle ul{ overflow: hidden; _height:1px; margin-left: 1px;}
    .qhDrillInfoTabTitle ul li{ float: left; border: 1px solid #abcdef; border-bottom: none; height: 30px; line-height: 30px; padding: 0 15px; margin-right: 3px; cursor:pointer;}
    .qhDrillInfoContent { height: 200px; margin-top: 1px;}
    .qhDrillInfoTabCurrent{ background: #66adff !important; color:#fff;}
</style>